<template>
  <div class="newdet">
    <div class="newdetimg" v-if="newdetdata.type==1">
      <div class="head">
        <span class="iconfont iconjiantou2" @click="$router.back()"></span>
        <div class="logoWrapper">
          <span class="iconfont new iconnew"></span>
        </div>
        <!-- 如果是关注,样式变红 -->
        <div
          class="atten"
          :class="{highlight:!newdetdata.has_follow}"
          @click="hasFollowyet"
        >{{newdetdata.has_follow?'已关注':'关注'}}</div>
      </div>
      <div class="headline">{{newdetdata.title}}</div>

      <div class="info">{{newdetdata.user.nickname}} {{newdetdata.create_date.split('T')[0]}}</div>
      <div class="content" v-html="newdetdata.content"></div>
    </div>
    <div class="newdetvideo" v-if="newdetdata.type==2">
      <div class="head">
        <span class="iconfont iconjiantou2" @click="$router.back()"></span>
      </div>
      <div class="video">
        <video
          ref="begin"
          poster="../../assets/video.jpg"
          src="https://video.pearvideo.com/mp4/third/20200629/cont-1682778-10020584-153335-hd.mp4"
          controls="controls"
        ></video>
        <div class="icon" @click="Play" v-if="isicon">
          <span class="iconfont iconshipin"></span>
        </div>
      </div>
      <div class="neweser">
        <img src="../../assets/none.jpg" alt />
        <div class="nickname">{{newdetdata.user.nickname}}</div>
        <div
          class="atten"
          :class="{highlight:!newdetdata.has_follow}"
          @click="hasFollowyet"
        >{{newdetdata.has_follow?'已关注':'关注'}}</div>
      </div>
      <div class="content">{{ newdetdata.title}}</div>
    </div>
    <div class="likewx">
      <div class="iconbox">
        <span class="iconfont icondianzan" :class="{red:newdetdata.has_like}" @click="Like"></span>
        {{newdetdata.like_length}}
      </div>
      <div class="iconbox">
        <span class="iconfont iconweixin"></span>微信
      </div>
    </div>

    <div v-if="commtenData[0]">
      <div class="title">精彩跟帖</div>
      <maincomment
        :commten="commtens"
        v-for="commtens in commtenData"
        :key="commtens.id "
        @maincomtent="maincomtent"
      />
      <div class="more" @click="$router.push('/morecomment/'+$route.params.id)">+更多跟帖</div>
    </div>
    <div v-else class="title">暂无跟帖,留下自己的想法吧^ ^</div>
    <publish :publishdata="maindata" ref="replycall" @loadcomment="loadcomment" />
  </div>
</template>

<script>
import maincomment from "../comment/maincomment";
import publish from "../comment/publish";
export default {
  components: {
    maincomment,
    publish
  },
  data() {
    return {
      newdetdata: {},
      isicon: true,
      commtenData: [],
      maindata: ""
    };
  },
  methods: {
    hasFollowyet() {
      if (this.newdetdata.has_follow) {
        this.$axios({
          url: "/user_unfollow/" + this.newdetdata.user.id //与this.$route.params.id不一样,一个是文章id,一个是文章作者id
        }).then(res => {
          this.newdetdata.has_follow = false;
        });
      } else {
        this.$axios({
          url: "user_follows/" + this.newdetdata.user.id
        }).then(res => {
          this.newdetdata.has_follow = true;
        });
      }
    },
    maincomtent(maindata) {
      this.maindata = maindata;
      this.$refs.replycall.isactivate();
      console.log("传到id了");
    },
    Play() {
      // console.log(123);
      var beginplay = this.$refs.begin;
      console.log(beginplay);
      beginplay.play();
      this.isicon = false;
    },

    Like() {
      this.$axios({
        url: "/post_like/" + this.$route.params.id
      }).then(res => {
        console.log(res);

        if (res.data.message == "点赞成功") {
          this.newdetdata.like_length += 1;
          this.newdetdata.has_like = true;
        } else {
          this.newdetdata.like_length -= 1;
          this.newdetdata.has_like = false;
        }
      });
    },
    loadcomment() {
      this.loadcommentpage();
    },
    loadcommentpage() {
      //评论数组接口
      this.$axios({
        url: "/post_comment/" + this.$route.params.id
      }).then(res => {
        console.log(res.data.data);
        const commtenData = res.data.data;
        //页面不需要太长,先显示头三条,第个数组数据下面都有个length,可以试着打印看
        if (commtenData.length > 3) {
          commtenData.length = 3;
        }
        this.commtenData = commtenData;
        // 发送完清数据,不要让他一直是回复那个人
        this.maindata = {};
      });
    }
  },
  mounted() {
    this.$axios({
      url: "/post/" + this.$route.params.id
    }).then(res => {
      this.newdetdata = res.data.data;
      // console.log(res.data.data.has_like);

      //   console.log(this.newdetdata.like_length);
    });
    // console.log(this.$route.params.id);
    this.loadcommentpage();
  }
};
</script>

<style lang="less" scoped>
.newdet {
  padding: 7.222vw 4.444vw 7.222vw 5.556vw;
  background-color: #f2f2f2;
  .head {
    display: flex;
    align-items: center;
    .iconjiantou2 {
      font-size: 4.444vw;
    }
    .logoWrapper {
      flex: 1;
      .iconnew {
        font-size: 15vw;
      }
    }
    .atten {
      padding: 1.111vw 2.778vw;
      border: 0.278vw solid #bbb;
      color: #333;
      font-size: 3.333vw;
      border-radius: 2.778vw;
    }
    .highlight {
      background-color: red;
      border: 0.278vw solid red;
      color: white;
    }
  }
  .headline {
    font-size: 5vw;
    font-weight: 700;
  }
  .info {
    font-size: 3.889vw;
    color: #bbb;
    margin-bottom: 8.333vw;
    margin-top: 2.778vw;
  }
  /deep/ img {
    max-width: 100%;
  }
  .content {
    margin-bottom: 8.333vw;
  }
  .video {
    position: relative;
    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 54px;
      height: 54px;
      text-align: center;
      line-height: 54px;
      margin-left: -27px;
      margin-top: -27px;
      border-radius: 50%;
      background-color: rgba(233, 220, 215, 0.7);
    }
    .iconshipin {
      font-size: 46px;
      color: white;
    }
  }
  video {
    width: 100%;
    margin: 5.556vw 0;
  }
  .neweser {
    display: flex;
    align-items: center;
    margin-bottom: 2.778vw;
    img {
      width: 7.222vw;
      height: 7.222vw;
      border-radius: 7.222vw;
    }
    .nickname {
      flex: 1;
      margin-left: 1.667vw;
      font-size: 3.889vw;
      color: #333;
    }
    .atten {
      padding: 1.111vw 2.778vw;
      border: 0.278vw solid #bbb;
      color: #555;
      font-size: 3.333vw;
      border-radius: 2.778vw;
    }
    .highlight {
      background-color: red;
      border: 0.278vw solid red;
      color: white;
    }
  }
  .likewx {
    display: flex;
    justify-content: space-around;
    .iconbox {
      width: 22.222vw;
      height: 8.333vw;
      border: 0.278vw solid #888;
      text-align: center;
      line-height: 8.333vw;
      font-size: 3.889vw;
      border-radius: 8.333vw;
    }
    .icondianzan {
      font-size: 5vw;
    }
    .iconweixin {
      font-size: 5vw;
      color: #00c800;
    }
  }
  .red {
    color: red;
  }
  .title {
    margin-top: 8.333vw;
    text-align: center;
    font-weight: 700;
    font-size: 5vw;
    color: #555;
  }

  .more {
    margin: 8.333vw auto 14.333vw;
    width: 33.333vw;
    height: 8.333vw;
    font-size: 3.611vw;
    border: 0.278vw solid #333;
    border-radius: 4.167vw;
    text-align: center;
    line-height: 9.167vw;
    color: #333;
  }
}
</style>